<template>
  <div class="applicationcode" @click="goback">

    <van-search
      v-model="value"
      show-action
      label="查询"
      placeholder="请输入名称和证件号"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div id="content" ref="order" style="position:relative;" class="content">

      <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
        <van-list
          v-if="list.length!==0"
          v-model="loading"
          :finished="finished"
          :finished-text="listText"
          :immediate-check="false"
          @load="pageInfoList"
        >
          <van-swipe-cell
            v-for="(item
                    ,index) in list"
            :key="index"
          >
            <van-checkbox-group v-model="result">
              <div style="" :class="[index===0?'order-msg':'']" class="order-content">
                <div class="order-title" style="display:flex;justify-content:space-between;">
                  <div class="content-message" style="display:flex;align-items:center;"><div class="chiooce-order"><van-checkbox :name="item.id" /></div>序号：<div class="number">{{ index+1 }}</div></div>
                  <div style="display:flex;align-items:center;">
                    <svg-icon class="edite" icon-class="edite" @click.native="getPerson(item.id)" />
                    <svg-icon icon-class="delete" class="delete" @click.native="deleteInfo(item.id,index)" />
                  </div>
                </div>
                <div class="content-message"><div>姓名：</div><div>{{ item.name }}</div></div>
                <div class="content-message"><div>隔离开始日期：</div><div>{{ item.startTime }}</div></div>
                <div class="content-message"><div>隔离结束日期：</div><div>{{ item.endTime }}</div></div>
                <div class="content-message reson"><div style="flex:1.5;"><div>隔离原因：</div></div><div style="flex:3;">{{ item.quarantReason }}</div></div>
              </div>
            </van-checkbox-group>
          </van-swipe-cell>
        </van-list>
        <van-empty v-else description="暂无数据" />
      </van-pull-refresh>
      <div style="width:100%;height:200px;" :class="[showTitlePaddingTop?'title-message':'']" />
    </div>
    <div>
      <van-tabbar v-model="active" placeholder safe-area-inset-bottom @change="onChange">
        <div class="content-footer" style="display:flex;align-items:center;width:100%;justify-content:space-around;">
          <van-button type="info" style="border-radius:5px;" size="small">上班打卡</van-button>
          <!-- <van-button type="info" style="border-radius:5px;" size="small" @click.native="addPersonMessage">新增</van-button> -->
          <van-button type="primary" style="border-radius:5px;" size="small">解除隔离</van-button>
        </div>
      </van-tabbar>
      <div style="width:100%;height:100px;" :class="[showTitlePaddingTop?'title-message':'']" />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'

import { Toast, Dialog, Icon, List, Empty, NavBar, Button, Tabbar, TabbarItem, Search, SwipeCell, PullRefresh } from 'vant'
import { Checkbox, CheckboxGroup } from 'vant'
Vue.use(Empty)
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Toast).use(Dialog).use(Icon).use(List).use(PullRefresh).use(SwipeCell).use(Search)
import $api from '@/api/index'

export default {
  name: 'Applicationcode',
  beforeRouteLeave(to, from, next) { // 离开页面之前将高度存储到sessionStorage。这里不建议用localStorage，因为session在关闭浏览器时会自动清除，而local则需要手动清除，有点麻烦。
    sessionStorage.setItem('scrollH', document.getElementById('content').scrollTop)
    next()
  },
  data() {
    return {
      list: [],
      listText: '暂无数据...',
      loading: false,
      finished: false,
      refreshing: false,
      obj: {
        pageNum: 1,
        pageSize: 10,
        createId: '1'
      },
      deleteId: '',
      active: 1,
      result: []

    }
  },
  computed: {
    showTitlePaddingTop() {
      return this.$store.state.user.showTitlePaddingTop
    }
  },
  beforeCreate() {
    this.$store.dispatch('user/showView', this.$route.name)
    console.log(this.$store)
    this.$dd.ready(() => {
      this.$dd.setTitle({
        title: '搜索隔离人员'
      })
      this.$dd.showTitleBar()
    })
  },
  activated() {
    this.$dd.showTitleBar()
    if (this.$store.state.user.refresh) {
      if (localStorage.getItem('keepAlive')) {
        localStorage.setItem('keepAlive', false)
        this.list = []
      }
      this.pageInfoList()
    }
    if (sessionStorage.getItem('scrollH')) {
      document.getElementById('content').scrollTop = sessionStorage.getItem('scrollH')
    }
    this.$store.dispatch('user/show', true)
  },
  mounted() {
    if (this.$until.h5userAgent() === 1) {
      this.$store.dispatch('user/showTitle', true)
    }
    this.$store.dispatch('user/show', true)
    this.$refs.order.style.height = '100%'
  },
  beforeDestroy() {
  },
  methods: {
    goback() {
    },
    onSearch() {},
    getData() {},
    addPersonMessage() {
      this.$router.push({ path: '/code/index' })
    },
    onChange(index) {
    },
    pageInfoList() {
      this.obj['createId'] = localStorage.getItem('createId')
      $api.user.pageInfoList(this.obj).then(res => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        this.list = this.list.concat(res.data.list)
        const obj = {}
        this.list = this.list.reduce((cur, next) => {
          obj[next.id] ? '' : obj[next.id] = true && cur.push(next)
          return cur
        }, [])
        this.loading = false
        this.obj.pageNum = res.data.nextPage !== 0 ? res.data.nextPage : 1
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      }, error => {
        this.refreshing = false
        console.log(error)
      })
    },
    removeOrder() {
      // alert(this.result.toString())
    },
    getPerson(id) {
      this.$router.push({ path: '/code/index', query: {
        id: id
      }})
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.obj.pageNum = 1
      this.obj.pageSize = 10
      this.pageInfoList()
    },
    deleteInfo(id, index) {
      this.deleteId = id
      Dialog.confirm({
        title: '删除',
        message: '确认删除?'
      })
        .then(() => {
          this.list.splice(index, 1)
          $api.user.deleteInfo({ id: this.deleteId, createId: localStorage.getItem('createId') }).then(res => {
            Toast('删除成功!')
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    searchPerson() {}
  }
}
</script>

<style lang="scss" scoped>
.applicationcode{
  width:100%;
  height:100%;
  .content{
    width:100%;
    height:100%;
    overflow-y: scroll;
    margin-top:10px;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .order-content{
    width:96%;
    margin:10px auto;
    margin-top:10px;
    box-sizing: border-box;
    padding:0px 20px 20px 20px;
    background-color:#ffffff;
    border-radius: 10px;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .order-msg{
    margin-top:30px;
  }
  .title-message{
    padding-top:80px;
  }
  .content-time{
    display:flex;
    justify-content: space-between;
  }
  .chiooce-order{
    padding-right:20px;
  }
  .content-message{
    padding:20px 10px 10px 10px;
    display:flex;
    >div:nth-child(1){
      color:rgba(119, 119, 119, 0.6);
      font-size: 30px;
      flex:1.5;
    }
    >div:nth-child(2){
      padding-left:10px;
      color:rgba(65, 157, 244, 1);
      font-size: 30px;
      flex:3;
    }
  }
  .reson{
    display: flex;
  }
  .edite{
    width:40px;
    height:40px;
    color:rgba(65, 157, 244, 1);
    padding:10px;
    margin-right:20px;
  }
  .delete{
    width:40px;
    height:40px;
    padding:10px 0 10px 10px;
  }
  .add{
    width:35px;
    height:35px;
  }
  .number{
    font-size:32px;
    font-weight:600;
    color:rgba(119, 119, 119, 1);
  }
  .order-title{
    border-bottom:1px solid rgba(229, 229, 229, 1);
    padding:10px 0;
    color:rgba(119, 119, 119, 0.6);
  }
  .content-footer{
    margin:20px 0;
  }
}
</style>
